<template>
  <el-tabs v-model="activeName" class="tabs" :stretch="true">
    <el-tab-pane label="组件属性" name="first" class="tabs-comp-prop">
      <el-form
        label-position="left"
        class="right-comp-prop-form"
        style="font: bolder"
        label-width="80px"
      >
        <el-form-item label="控件类型">
          <el-input
            v-model="data.formPropInfo.ControlTypeStr"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="数据库表">
          <el-select
            placeholder="请选择数据库表"
            v-model="data.formPropInfo.DataTable"
            @change="dataTableChange"
          >
            <el-option
              v-for="item in data.DataTables"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="控件字段">
          <el-select
            v-model="data.formPropInfo.ControlFieId"
            placeholder="请选择控件字段"
          >
            <!-- data.ControlFieIds -->
            <el-option
              v-for="item in data.ControlFieIds"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="控件标题">
          <el-input v-model="data.formPropInfo.ControlTitle" />
        </el-form-item>
        <el-form-item label="标题提示">
          <el-input
            v-model="data.formPropInfo.TitleTip"
            rows="2"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="占位提示">
          <el-input v-model="data.formPropInfo.OccupancyTip" />
        </el-form-item>
        <el-form-item label="默认值">
          <el-input v-model="data.formPropInfo.DefaultValue" />
        </el-form-item>
        <el-form-item label="前缀">
          <el-input v-model="data.formPropInfo.Prefix" />
        </el-form-item>
        <el-form-item label="后缀">
          <el-input v-model="data.formPropInfo.Suffix" />
        </el-form-item>
        <el-form-item label="最多输入">
          <el-input
            v-model="data.formPropInfo.MaxInput"
            placeholder="Please input"
          >
            <template #append>个字符</template>
          </el-input>
        </el-form-item>
        <el-form-item label="能否清空">
          <el-switch
            v-model="data.formPropInfo.IsClear"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="是否只读">
          <el-switch
            v-model="data.formPropInfo.IsRead"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="是否禁用">
          <el-switch
            v-model="data.formPropInfo.IsActive"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="是否必填">
          <el-switch
            v-model="data.formPropInfo.IsRequired"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="是否隐藏">
          <el-switch
            v-model="data.formPropInfo.IsHide"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="组件样式" name="second" class="tabs-comp-prop">
      <el-form
        label-position="left"
        class="right-comp-prop-form"
        label-width="74px"
      >
        <!-- value -->
        <!-- data.compStyle.ControlStackFrame -->
        <el-form-item label="控件栈格">
          <el-slider
            v-model="data.compStyle.ControlStackFrame"
            style="width: 218px"
            show-stops
            :max="24"
            :step="2"
            size="small"
            input-size="small"
            height="20"
          />
        </el-form-item>
        <el-form-item label="标题宽度">
          <el-input v-model="data.compStyle.TitleWidth" />
        </el-form-item>
        <el-form-item label="控件宽度">
          <el-input v-model="data.compStyle.ControlWidth" />
        </el-form-item>
        <el-form-item label="控件Class">
          <el-select
            v-model="data.compStyle.ControlClass"
            placeholder="Select"
          ></el-select>
        </el-form-item>
        <el-form-item label="多端显示">
          <el-checkbox
            v-model="data.compStyle.MulitDisplay"
            label="Web"
            size="large"
          />
          <el-checkbox
            v-model="data.compStyle.MulitDisplay"
            label="App"
            size="large"
          />
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="表单属性" name="third" class="tabs-comp-prop">
      <el-form
        label-position="left"
        class="right-comp-prop-form"
        label-width="74px"
      >
        <el-form-item label="表单尺寸">
          <el-radio-group v-model="data.formProp.FormSize">
            <el-radio-button label="较大" />
            <el-radio-button label="中等" />
            <el-radio-button label="较小" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标签对齐">
          <el-radio-group v-model="data.formProp.LabelAlign">
            <el-radio-button label="左对齐" />
            <el-radio-button label="右对齐" />
            <el-radio-button label="顶部对齐" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题宽度">
          <el-input v-model="data.formProp.LabelWidth" />
        </el-form-item>
        <el-form-item label="栅栏间隔">
          <el-input v-model="data.formProp.PalletInterval" />
        </el-form-item>
        <el-form-item label="表单样式">
          <el-select
            v-model="data.formProp.FormStyle"
            placeholder="Select"
          ></el-select>
        </el-form-item>
        <el-form-item label="表单宽度">
          <el-select
            v-model="data.formProp.FormWidth"
            placeholder="Select"
          ></el-select>
        </el-form-item>
        <el-form-item label="表单Css">
          <el-input v-model="data.formProp.FormCss"></el-input>
        </el-form-item>
        <el-form-item label="表单Class">
          <el-select
            v-model="data.formProp.FormClass"
            placeholder="Select"
          ></el-select>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import mitt from '@/utils/bus';
import proFormApi from '@/api/flow/processForm/index';
import { capitalizeKeys } from '@/utils/util';
let data = reactive<any>({
  //根据控件传过来的表单信息
  formPropInfo: {
    FormId: '',
    Index: 0,
    //数据库表
    DataTable: '',
    Id: '',
    //控件类型
    ControlType: '',
    //控件字段
    ControlFieId: '',
    //控件标题
    ControlTitle: '',
    //标题提示
    TitleTip: '',
    //占位提示
    OccupancyTip: '',
    //默认值
    DefaultValue: '',
    //数据选项
    DataType: '',
    //静态的数据(json)
    StaticValue: '',
    //数据id 数据字典id/远端数据id
    DataId: '',
    //存储字段
    SaveFieId: '',
    //显示字段
    DisplayName: '',
    //能否清空
    IsClear: 0,
    //是否必填
    IsRequired: 0,
    //是否密码展示
    IsPwd: 0,
    //是否只读
    IsRead: 0,
    //是否隐藏
    IsHide: 0,
    //前缀
    Prefix: '',
    //后缀
    Suffix: '',
    //前图标
    PreIcon: '',
    //后图标
    SufIcon: '',
    //是否唯一
    IsUnique: 0,
    //最多输入
    MaxInput: '',
    IsActive: 0,
  },
  //表单属性
  formProp: {
    //表单id
    FormId: '',
    //表单尺寸
    FormSize: '',
    //标签对齐
    LabelAlign: '',
    //标签宽度
    LabelWidth: '',
    //栅栏间隔
    PalletInterval: '',
    //表单样式
    FormStyle: '',
    //表单宽度
    FormWidth: '',
    //表单Css
    FormCss: '',
    //表单class
    FormClass: '',
  },
  //组件样式
  compStyle: {
    //表单id
    FormId: '',
    //组件id
    CompId: '',
    //控件栈格
    ControlStackFrame: 10,
    //标题宽度
    TitleWidth: '',
    //控件宽度
    ControlWidth: '',
    //控件Class
    ControlClass: '',
    //多端显示
    MulitDisplay: '',
  },
  DataTables: [],
  ControlFieIds: [],
});
const bus: any = mitt;
let activeName = ref('first');
const value = ref(0);

watch(
  () => data.formPropInfo,
  (val: any) => {
    bus.emit('formRightCompPropInfo', val);
  },
  { deep: true }
);
bus.on('rightInfo', (currentData: any) => {
  data.formPropInfo = capitalizeKeys(currentData);
  if (currentData.formId) {
    data.formPropInfo.FormId = currentData.formId;
  }
  data.formPropInfo.Id = currentData.id;
  if (currentData.Index) {
    data.formPropInfo.Index = currentData.Index;
  }
  if (currentData.name) {
    data.formPropInfo.ControlTitle = currentData.name;
  }
  if (currentData.type) {
    if (currentData.type == 'Input') {
      data.formPropInfo.ControlTypeStr = '单行输入';
      data.formPropInfo.ControlType = currentData.type;
    } else if (currentData.type == 'textArea') {
      data.formPropInfo.ControlType = currentData.type;
      data.formPropInfo.ControlTypeStr = '多行输入';
    }
  }

  if (currentData.formItemId) {
    data.formPropInfo.FormItemId = currentData.formItemId;
  }

  if (currentData.dataTables) {
    var dataTables = currentData.dataTables.split(',');
    var allDataTables: any = [];
    dataTables.forEach((element: any) => {
      allDataTables.push({ value: element, label: element });
    });
    data.DataTables = allDataTables;
  }
});
const dataTableChange = async (val: any) => {
  var res = await proFormApi.getFieIdByTableName.get(val);
  data.ControlFieIds = res.data;
  // await
};
</script>
<style lang="scss" scoped>
//整个右侧div
.tabs {
  width: 100%;
  font-size: 20px;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  .tabs-comp-prop {
    height: 100%;
    width: 97%;
    overflow: hidden;
    .right-comp-prop-form {
      // padding-right: 10px;
      padding-left: 5px;
      position: relative;
      height: 100%;
      overflow: auto;
      :deep(.el-slider__button) {
        width: 14px;
        height: 14px;
      }
    }
  }
}
</style>
